import React from 'react';
import ReactEcharts from 'echarts-for-react';
import NormalIcon from '../../../../../public/normal-icon.png';
import WarningIcon from '../../../../../public/warning-icon.png';

let data = [];
for ( let i = 0 ; i < 24 ; i++){
    data.push({ date:`${ i < 10 ? '0' + i : i}:00`, status:i < 6 ? 'closed' : i === 20 ? 'error' : 'normal', value:200 + Math.round(Math.random() * 50), sameRatio:200 + Math.round(Math.random() * 50), adjoinRatio:200 + Math.round(Math.random() * 50) });
}

function HorizonBarChart({ }){
    const seriesData = [];
    seriesData.push({
        type:'bar',
        name:'运行状态',
        showBackground:true,
        backgroundStyle:{ color:'#f2f3f5' },
        barCategoryGap:'0%',
        data:data.map(item=>{
            return {
                value:100,
                status:item.status,
                itemStyle:{ color:item.status === 'closed' ? '#b3b3b3' : item.status === 'normal' ? '#03c660' : '#fe2400' }
            }
        }),
        z:10
    });
    return (
        <div style={{ display:'flex', paddingLeft:'2rem', alignItems:'center', height:'100%' }}>
            <div style={{ textAlign:'center' }}>
                <img src={NormalIcon} style={{ width:'28px', marginBottom:'4px' }} />
                <div>
                    <span>当前 :</span>
                    <span>正常</span>
                </div>
            </div>
            <ReactEcharts
                notMerge={true}
                style={{ flex:'1', height: '100%' }}
                option={{
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        formatter:(params)=>{
                            let str = params[0].name + '<br/>' + params[0].marker + params[0].seriesName + '<span style="margin-left:4px;color:' + params[0].color +  '">' + ( params[0].data.status === 'closed' ? '停止' : params[0].data.status === 'normal' ? '运行中' : '故障' ) + '</span>';
                            return str;
                        }
                    },
                    grid:{
                        top:20,
                        left:20,
                        right:20,
                        bottom:20,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:data.map(i=>i.date)
                    },
                    yAxis: {
                        show:false,
                        type: 'value',
                        name: 'kwh',
                        splitArea: {
                            show: false,
                        },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f0f0f0',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(0, 0, 0, 0.65)',
                        }
                    },
                    
                    series:seriesData
                }}
            />
        </div>
    )
}

export default HorizonBarChart;